<template>
    <div class="banners">
        <div class="swiper-control">
            <div class="custom-swiper-button-prev">
                <img src="/newHome/icon-left-arrow.png" />
            </div>
        </div>
        <Swiper
            :height="498"
            :modules="[
                SwiperAutoplay,
                SwiperEffectCreative,
                SwiperNavigation,
                SwiperController,
                Pagination,
            ]"
            :slides-per-view="1"
            :loop="true"
            :autoplay="{
                delay: 5000,
                disableOnInteraction: false,
            }"
            :creative-effect="{
                prev: {
                    shadow: false,
                    translate: ['-20%', 0, -1],
                },
                next: {
                    translate: ['100%', 0, 0],
                },
            }"
            :pagination="{
                el: '.p-swiper-pagination',
                clickable: true,
            }"
            :navigation="{
                nextEl: '.custom-swiper-button-next',
                prevEl: '.custom-swiper-button-prev',
            }"
            @swiper="onSwiper">
            <SwiperSlide>
                <img
                    v-if="store.deviceType === 'mobile'"
                    src="/newHome/m-card.png" />
                <img
                    v-if="store.deviceType !== 'mobile'"
                    src="/newHome/card.png" />
            </SwiperSlide>
            <SwiperSlide>
                <img
                    v-if="store.deviceType === 'mobile'"
                    src="/newHome/m-card2.png" />
                <img
                    v-if="store.deviceType !== 'mobile'"
                    src="/newHome/card2.png" />
            </SwiperSlide>
            <SwiperSlide>
                <img
                    v-if="store.deviceType === 'mobile'"
                    src="/newHome/m-card3.png" />
                <img
                    v-if="store.deviceType !== 'mobile'"
                    src="/newHome/card3.png" />
            </SwiperSlide>
            <!-- useSwiper() within a swiper instance -->
        </Swiper>
        <div class="swiper-control">
            <div class="custom-swiper-button-next">
                <img src="/newHome/icon-left-arrow.png" />
            </div>
        </div>
    </div>
    <div class="banners-footer">
        <div class="p-swiper-pagination"></div>
    </div>
</template>

<script lang="ts" setup>
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import {
        Autoplay as SwiperAutoplay,
        EffectCreative as SwiperEffectCreative,
        Navigation as SwiperNavigation,
        Controller as SwiperController,
        Pagination,
    } from 'swiper/modules';
    import { useGlobalStore } from '~/store';

    const store = useGlobalStore();

    function onSwiper() {
        // no-op: ensure type-safe handler exists
    }
</script>

<style lang="scss" scoped>
    .banners {
        display: flex;
        // width: pxToRem(735);
        width: pxToRem(1160);
        margin: 0 auto;
        height: auto !important;
        justify-content: center;
        align-items: center;
        .swiper {
            margin-left: 0;
            margin-right: 0;
            width: 100% !important;
            // box-shadow: pxToRem75(0) pxToRem75(9) pxToRem75(30) 0px #0016370D;
        }
        .swiper-slide {
            text-align: center;
            img {
                width: pxToRem(735);
                height: pxToRem(498);
            }
        }
        .custom-swiper-button-prev {
            display: none;
        }
        .custom-swiper-button-next {
            display: none;
        }
        .custom-swiper-button-next {
            cursor: pointer;
            height: 31.3125rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transform: rotate(180deg);
            z-index: 2;
            img {
                width: 4.375rem;
                height: 4.375rem;
            }
        }
        .custom-swiper-button-prev {
            cursor: pointer;
            height: 31.3125rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2;
            img {
                width: 4.375rem;
                height: 4.375rem;
            }
        }
        .custom-swiper-pagination {
            margin-top: 100px;
        }
    }
    .banners-footer {
        width: pxToRem(200);
        text-align: center;
        height: auto;
        margin: 0 auto;
        margin-top: pxToRem(53);
        margin-bottom: pxToRem(86);
        ::v-deep(.swiper-pagination-bullet) {
            width: pxToRem(15);
            height: pxToRem(15);
            margin-left: pxToRem(11);
            margin-right: pxToRem(11);
        }
        ::v-deep(.swiper-pagination-bullet-active) {
            background: #e27049;
        }
    }
    // 桌面端断点适配
    @media (max-width: 1680px) and (min-width: 1441px) {
        .banners {
            width: pxToRem(1100);
            .swiper-slide img {
                width: pxToRem(700);
                height: pxToRem(470);
            }
        }
    }
    @media (max-width: 1440px) and (min-width: 1367px) {
        .banners {
            width: pxToRem(1000);
            .swiper-slide img {
                width: pxToRem(660);
                height: pxToRem(440);
            }
        }
    }
    @media (max-width: 1366px) and (min-width: 1281px) {
        .banners {
            width: pxToRem(940);
            .swiper-slide img {
                width: pxToRem(620);
                height: pxToRem(410);
            }
        }
    }
    @media (max-width: 1280px) and (min-width: 1025px) {
        .banners {
            width: pxToRem(900);
            .swiper-slide img {
                width: pxToRem(590);
                height: pxToRem(390);
            }
        }
    }
    @media (max-width: 768px) {
        .banners {
            width: pxToRem75(750);
            .swiper-slide {
                text-align: center;
                img {
                    width: pxToRem75(750);
                    height: pxToRem75(409.98);
                }
            }
            .custom-swiper-button-next {
                display: none;
                // height: pxToRem75(200);
                // img {
                //     width: pxToRem75(200);
                //     height: pxToRem75(200);
                // }
            }
            .custom-swiper-button-prev {
                display: none;
                // height: pxToRem75(200);
                // img {
                //     width: pxToRem75(200);
                //     height: pxToRem75(200);
                // }
            }
            .custom-swiper-pagination {
                margin-top: pxToRem75(100);
            }
        }
        .banners-footer {
            width: pxToRem75(111);
            margin-top: pxToRem75(0);
            margin-bottom: pxToRem75(160);
            ::v-deep(.swiper-pagination-bullet) {
                width: pxToRem75(15);
                height: pxToRem75(15);
                border-radius: 100%;
                margin-left: pxToRem75(11);
                margin-right: pxToRem75(11);
            }
        }
    }
</style>
